<template>
<!--index.wxml-->
<view>
<view class="hotel-query">
  <!-- 轮播图banner -->
	<view class="swiper-box"></view>

  <!-- 信息框 -->
  <view class="search-box">
    <view class="search-item">
			<view class="hotel">肯天大酒店</view>
			<view class="roomtype">{{rdata.name}}</view>
			<view class="day">
				<view>{{day[0].mouth}}-{{day[0].day}} 周{{day[0].week}}</view>
				<view class="daytime">{{daytime}}天</view>
				<view>{{day[1].mouth}}-{{day[1].day}} 周{{day[1].week}}</view>
			</view>
      
    </view>
    
  </view>
	<view class="bookform">
		<view class="bookform-input">
		   <view class="title">房间数量</view>
		   <input class="uni-input" disabled="disabled" value="最多可订1间" />
			 <uni-icons type="" size="25"></uni-icons>
		</view>
		<view class="bookform-input">
		   <view class="title">住客姓名</view>
		   <input class="uni-input" disabled="disabled" :value="bookRoom.name"/>
		<uni-icons type="person" size="25" @click="checkuser"></uni-icons>
		</view>
		<view class="bookform-input">
		   <view class="title">联系电话</view>
		   <input class="uni-input" disabled="disabled" :value="bookRoom.phone" />
			 <uni-icons type="" size="25"></uni-icons>
		</view>
		
	</view>
	<!-- <view class="bookform-coupon">
		<view class="bookform-coupon-input">
		   <view class="title">优惠券</view>
		   <input class="uni-input" disabled="disabled" value="-￥15" />
			<uni-icons type="arrowright" size="19"></uni-icons>
		</view>		
	</view> -->
	<view class="bookform-pay">
		<view style="padding: 0 10rpx 0 40rpx;margin-bottom: 5rpx;color: #CECECE;">支付方式</view>
		<view class="bookform-pay-input">
		   <!-- <view class="title">微信支付</view> -->
			 <label class="radio title"><radio value="r1" checked="true" style="transform: scale(0.8);" /><text style="font-size: 30rpx;">微信支付</text></label>
		</view>		
	</view>
	<view class="bookform-role">
		<view class="bookform-role-input">
		   <view class="title">取消规则</view>
			 <view rows="2" readonly="readonly" class="uni-input" style="color: #9c9c9c;">2020年5月17日22:00之前可免费取消，之后不可取消且无法退款</view>
		</view>		
		<view class="bookform-role-input">
		   <view class="title">备注</view>
			 <input class="uni-input" placeholder="请输入您的特需物品或服务" />
		</view>		
	</view>

	<view class="orderbtn">
		<view style="width: 60%;padding-left: 30rpx;">
			在线付
			<view class="orderbtn-pay">
				<text style="font-size: 32rpx;margin-bottom: 10rpx;">￥</text>{{bookpay}}
			<!-- <view class="orderbtn-pay-price">已优惠29元</view> -->
			</view>
		</view>
		<view class="orderbtn-btn">
			<button @tap="bookpage">立即预定</button>
		</view>

	</view>
</view>
</view>

</template>

<script module="filter" lang="wxs" src="../../filter/filters.wxs"></script>

<script>
//index.js
//获取应用实例
const app = getApp().globalData;

let store =require("../utils/store.js")
import {_allUser} from '../../common/vmeitime-http/address.js'
import {_orderCreate,_pay} from '../../common/vmeitime-http/pay.js'
import uniIcons from "@/components/uni-icons/uni-icons.vue"
export default {
  data() {
    return {
		rdata:{},
		day:[],
		daytime:null,
		bookRoom:{
			name:"",
			phone:""
		},
		bookpay:"115",
		orderTypesMiddles:{
			roomTypeId:"",
			count:1,
			typeId:0
		},
		btnflag:0 //提交标志位
		
    };
  },

  components: {
	uniIcons
  },
  props: {},

 onLoad(param) {
            console.log(param)
			// var aitem={}
						this.orderTypesMiddles.typeId = param.id
						this.rdata.name = param.name
						this.bookpay = param.price*uni.getStorageSync('daytime')
						this.orderTypesMiddles.roomTypeId = param.roomtypeid
						this.day = store.getItem("day")
						this.daytime = store.getItem("daytime")
						_allUser({defaultStatus	:1}).then(res =>{
							console.log(res)
							this.bookRoom.id = res.data.data[0].id;
							this.bookRoom.name = res.data.data[0].name;
							this.bookRoom.phone = res.data.data[0].phoneNumber;
							console.log(this.bookRoom)
						})
        },
  /**
   * 页面显示
   */
  onShow() {
   
  },

  methods: {
		ceshi(a){
			console.log(a)
			http.get(Room+a).then(res => {
						console.log(res)
						})
		},
		checkuser(){
			// console.log("hhhhhhhhhhhhhhhhhh")
			uni.navigateTo({
				url: `/pages/address/address?source=1`
			})
		},
		qLogistics(item){
			console.log(item)
			this.bookRoom.phone = item.phoneNumber;
			this.bookRoom.name = item.name;
			this.bookRoom.id = item.id;
		},
		bookpage(){
			var that = this
			console.log("提交")
			var obj = {
				arriveTime:this.day[0].year+'-'+this.day[0].mouth+'-'+this.day[0].day+" 14:00:00",
				departureTime:this.day[1].year+'-'+this.day[1].mouth+'-'+this.day[1].day+" 12:00:00",
				addressId:this.bookRoom.id,
				orderPay:this.bookpay,
				orderTypesMiddles:[this.orderTypesMiddles]
			}
			if(!obj.addressId){
				uni.showToast({
					title:"请选择入住人",
					icon:"none"
				})
				return
			}
			console.log(obj)
			if(this.btnflag == 0){
				this.btnflag = 1;
				_orderCreate(obj).then(res => {
					if(res.data.code == 200){
						_pay({id:res.data.data}).then(resp=>{
							console.log(resp)
								var paydata = JSON.parse(resp.data.data);
								uni.requestPayment({
								    provider: 'wxpay',
								    timeStamp: paydata.timeStamp,
								    nonceStr: paydata.nonceStr,
								    package: paydata.package,
								    signType: 'MD5',
								    paySign: paydata.paySign,
								    success: function (rese) {
										that.btnflag = 0
										console.log(that.btnflag+"--"+"succ")
								        console.log('success:' + JSON.stringify(rese));
										uni.redirectTo({
											url:"../OrderDetails/OrderDetails?static=9&id="+res.data.data
										})
								    },
								    fail: function (err) {
										that.btnflag = 0
										console.log(that.btnflag+"--"+"erro")
								        console.log('fail:' + JSON.stringify(err));
										uni.redirectTo({
											url:"../OrderDetails/OrderDetails?static=2&id="+res.data.data
										})
								    }
								});
						})
						.catch( err =>{
							that.btnflag = 3
							console.log(err)
						})
					}
				})
			}else if(that.btnflag == 3){
				uni.showToast({
					title:"TA房型预计入住时间的房型数不够，请重新选择其他的。",
					icon:"none"
				})
			}
			
		}
	

  }
};
</script>
<style>
/**index.wxss**/
/* 轮播图 */

.swiper-box {
  height: 252rpx;
	background-color:#FFCF31 ;
}

.swiper-item {
  width: 750rpx;
  height: 100%;
}

/* 搜索框 */

.search-box {
  box-sizing: border-box;
  position: absolute;
  left: 50%;
  top: 100rpx;
  transform: translateX(-50%);
  width: 702rpx;
  height: 300rpx;
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 0px 0px 20px 0px rgba(255, 122, 0, 0.3);
  padding: 0rpx 60rpx;
	
}

.slide-image{
	width: 100%;
	
}

.search-item {
  font-size: 28rpx;
  color: #333;
  height: 94rpx;
  line-height: 90rpx;
  display: flex;
  flex-direction:column;
}

.search-item:not(:first-child) {
  border-top: 1px solid #eee;
}

.show-address {
  display: inline-block;
  max-width: 400rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.my-address {
  float: right;
  color: #666;
  font-size: 24rpx;
}

.address-icon {
  width: 28rpx;
  height: 28rpx;
  position: relative;
  top: 4rpx;
  margin-right: 12rpx;
}

/* 入住天数 */

.date-item {
  width: 200rpx;
}
.date-item:nth-child(2){
  width: 160rpx;
}

.check-info {
  line-height: 30rpx;
  color: #999;
  font-size: 22rpx;
  float: right;
  margin-top: 14rpx;
}

.check-days {
  border-bottom: 1px solid #ff7a00;
  height: 64rpx;
  line-height: 70rpx;
  color: #ff7a00;
  text-align: center;
}

.check-moon {
  width: 20rpx;
  height: 23rpx;
  margin-right: 10rpx;
}

.search-ipt {
  width: 100%;
  height: 100%;
}

.search-ipt:-moz-placeholder {
  color: #999;
}

/* 查找btn */
.check-btn {
  height: 76rpx;
  width: 404rpx;
  float: left;
  background-color: #ff7a00;
  color: #fff;
  font-size: 32rpx;
}

.quick-btn {
  color: #ff7a00;
  width: 148rpx;
  height: 76rpx;
  font-size: 24rpx;
  float: right;
  border: 1px solid #ff7a00;
  border-radius: 5px;
  background-color: #fff1e5;
}
.icon-quick{
  float: left;
  width: 28rpx;
  height: 46rpx;
  margin-top: 15rpx;
  margin-left: 32rpx;
  margin-right: 12rpx;
}
.text-quick{
  float: left;
  width: 60rpx;
  line-height: 32rpx;
  margin-top: 4rpx;
}

/* 功能入口 */

.bookform {
  width: 100%;
  height: 240rpx;
  margin-top: 200rpx;
  background-color: #fff;
}
.bookform-input{
	display: flex;
	height: 80rpx;
	font-size: 32rpx;
	align-items: center;
	padding: 0 10rpx 0 40rpx;
	border-bottom: 1rpx solid #F6F6F6;
	
}
.bookform-coupon{
	width: 100%;
	margin-top: 20rpx;
	background-color: #fff;
}
.bookform-pay{
	width: 100%;
	margin-top: 20rpx;
}
.bookform-role{
	width: 100%;
	margin-top: 20rpx;
	background-color: #fff;
}
.bookform-role-input{
	display: flex;
	height: 82rpx;
	font-size: 32rpx;
	align-items: center;
	padding: 0 10rpx 0 40rpx;
	border-bottom: 1rpx solid #F6F6F6;
}
.bookform-role .uni-input{
	font-size: 30rpx;
	width: 65%;
	height: 75rpx;
}
.bookform-role .title{
	width: 180rpx;
	
}
.bookform-pay-input{
	display: flex;
	height: 75rpx;
	font-size: 32rpx;
	align-items: center;
	padding: 0 10rpx 0 40rpx;
	border-bottom: 1rpx solid #F6F6F6;
	background-color: #fff;
	justify-content:space-between;
}
.bookform-coupon-input{
	display: flex;
	height: 75rpx;
	font-size: 32rpx;
	align-items: center;
	padding: 0 10rpx 0 40rpx;
	border-bottom: 1rpx solid #F6F6F6;
}
.bookform-input .title{
	width: 180rpx;
	font-size: 30rpx;
}
.bookform-input .uni-input{
	font-size: 30rpx;
	width: 65%;
}
.bookform-coupon-input .title{
	width: 180rpx;
}
.bookform-coupon-input .uni-input{
	font-size: 31rpx;
	width: 65%;
	text-align: right;
	color: #ff0000;
}
.func-item {
  flex: 1;
  position: relative;
}

.func-item:not(:first-child)::after {
  content: '';
  position: absolute;
  top: 65rpx;
  width: 2rpx;
  height: 50rpx;
  background-color: #eee;
}

.func-icon {
  width: 42rpx;
  height: 36rpx;
  display: block;
  margin: 52rpx auto 20rpx;
}

.func-text {
  color: #333;
  font-size: 24rpx;
  text-align: center;
}

/* 酒店预订 */

.hotel-reservation {
  padding: 0 24rpx 10rpx;
}

.reservation-title {
  height: 90rpx;
  line-height: 90rpx;
  font-size: 32rpx;
  color: #333;
  text-align: center;
}

/* 酒店列表 */

.hotel-list {
  border-radius: 5px;
  background-color: #fff;
  box-shadow: 0px 0px 10px 0px rgba(170, 170, 170, 0.3);
  top: 1127px;
  width: 702rpx;
  height: 241rpx;
  margin-bottom: 20rpx;
  overflow: hidden;
}

.hotel-pic {
  float: left;
  width: 200rpx;
  height: 100%;
}

.hotel-info {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding-left: 210rpx;
  font-size: 28rpx;
  line-height: 48rpx;
  position: relative;
}

.hotel-name {
  color: #333;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hotel-score {
  color: #ff7a00;
  margin-right: 35rpx;
}

.hotel-star, .hotel-position {
  color: #666;
}

.hotel-position {
  font-size: 24rpx;
}

.hotel-distance {
  float: left;
}

.hotel-addr {
  display: inline-block;
  width: 260rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hotel-feature {
  border: 1px solid rgb(255, 122, 0);
  border-radius: 5px;
  background-color: rgb(255, 241, 229);
  height: 29rpx;
  color: #ff7a00;
  padding: 0 10rpx;
  margin-right: 12rpx;
}

.hotel-price {
  position: absolute;
  right: 0;
  bottom: 10rpx;
  background-color: rgb(255, 122, 0);
  width: 150rpx;
  height: 49rpx;
  border-radius: 10rpx 0 0 10rpx;
  text-align: center;
  color: #fff;
  font-size: 22rpx;
}

.price-num {
  font-size: 26rpx;
}

/* 预定页面 */

.orderpage{
	position: fixed;
	bottom: 0px;
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column-reverse;
	z-index: 999;
	background-color: rgb(127,127,127,0.5);
	
}

.order{
	background-color: #fff;
	height: 80%;
	border-radius:30rpx 30rpx 0 0;
	margin-bottom: -300px;
	box-shadow: 10px 10px 10px 10px rgba(115, 53, 0, 0.5);
}
.swiper-box-order{
	border-radius: 30rpx 30rpx 0 0;
}

.orderclose{
	position: fixed;
	top: 10rpx;
	left: 10rpx;
	color: #F6F3F1;
	z-index: 999999999999;
}

.ordertop{
	height: 20%;
	margin-bottom: 300px;
}
.orderbtn{
	background-color: #ffffff;
	height: 8%;
	width: 100%;
	position: fixed;
	bottom: 0;
	box-shadow: 10px 10px 10px 10px rgba(9, 4, 0, 0.3);
	display: flex;
	align-items:center;
	justify-content:space-between;

}
.orderbtn-btn{
	width: 40%;
	height: 100%;
}
.orderbtn-btn button{
	width: 100%;
	height: 100%;
	background-color: #FFCF31;
	color: #ffffff;
	border-radius: 0;
	font-size: 40rpx;
}
.orderbtn-pay{
	display: flex;
	color: #ff0000;
	font-size: 50rpx;
	align-items:flex-end;
	font-weight: bold;
}
.orderbtn-pay-price{
	font-size: 20rpx;
	border: 2.5rpx solid #FF0000;
	height: 30rpx;
	margin-bottom: 12rpx;
	line-height: 25rpx;
	padding: 0 2px 0 2px;

}
.day{
	display: flex;
	align-items: center;
}
.hotel{
	font-size: 35rpx;
}
.daytime{
	border: 2rpx solid #111;
	border-radius: 25px;
	height: 50rpx;
	width: 70rpx;
	margin: 0 20rpx 0 20rpx;
	font-size: 25rpx;
	display: flex;
	justify-content: center;
	align-items: center;

}
.roomtype{
	color: #bf9b24;

}
.orderbtn-btn button {
	width: 100%;
	height: 100%;
	background-color: #FFCF31;
	color: #ffffff;
	border-radius: 0;
	font-size: 40rpx;
	align-items: center;
	display: flex;
	justify-content: center;

}
.bookform-role .uni-input {
	font-size: 25rpx;
	}

</style>